<template>
  <div>
    <div class="comment-thead mt20">
      <i class='fs20'>评论</i>
      <i class='fs10 fcgray ml20'>共 {{ commentData.total }} 条评论</i>
    </div>
    <div class="comment-textarea mt20">
      <div class="fl textarea-avatar mr20">
        <img :src='avatar ? avatar : defaultAvatar' :title='profile.nickname' class="disinblock default-avatar cursor-pointer">
      </div>
      <div class="fl textarea-con">
        <el-input
          type="textarea"
          placeholder="评论"
          v-model="textarea"
          maxlength="140"
          show-word-limit
          @click.native='ifShowLoginDialog()'
        >
        </el-input>
        <div class="mt10 ml5 posi-rel">
          <!-- 表情按钮 -->
          <emoji @commentEmoji='commentEmoji'></emoji>
          <!-- @ -->
          <span class="alt disinblock cursor-pointer"></span>
          <!-- 评论按钮 -->
          <el-button type="primary" round size="mini" class='fr' @click='submitComment()'>评论</el-button>
        </div>
      </div>
    </div>
    <comment-body :comment=commentData></comment-body>
    <login-dialog :dialog-visible='dialogVisible' @toogle='toogleDialog'></login-dialog>
  </div>
</template>

<script>
import loginDialog from '../../headerMain/loginDialog'
import { mapGetters } from 'vuex'
import emoji from '../../../components/emoji/emoji'
import commentBody from './content/commentBody'
export default {
  name: "comment",
  props: ['comment'],
  data() {
    return {
      textarea: '', // 评论文本框内容
      emojiData: '',
      commentData: {
        total: 0
      }, // 评论数据
      defaultAvatar: require("../../../assets/default_avatar.jpg"), // 默认用户头像
      dialogVisible: false, // 登录弹框显隐
      token: null
    }
  },
  mounted() {
    this.token = localStorage.getItem('token')
  },
  methods: {
    commentEmoji(text) {
      this.emojiData += text
    },
    async submitComment() {
      if (this.ifShowLoginDialog()) {
        return
      }
      let param = {
        t: 1, // 1——发送
        type: 2, // 2: 歌单
        id: this.playList.id,
        content: this.textarea
      }
      try {
        let res = await this.$api.comment(param)
        console.log('comment res:', res)
        if (res.data.code == 200) {
          this.textarea = ''
          this.$message({
            message: '评论成功!',
            type: 'success'
          });
          let param1 = {
            id: this.playListData.id,
            timestamp: new Date().valueOf()
          }
          let res1 = await this.$api.getPlaylistComment(param1)
          this.commentData = res1.data
          console.log(res1)
        }
      } catch(err) {
        console.log(err)
      }
    },
    ifShowLoginDialog() {
      if (this.token) {
        this.dialogVisible = true
      } else {
        this.dialogVisible = false
      }
      return this.dialogVisible
    },
    toogleDialog(showFlag) {
      this.dialogVisible = showFlag
    },
  },
  computed: {
    ...mapGetters([
      'userid',
      'avatar',
      'profile'
    ])
  },
  watch: {
    textarea() {
      this.ifShowLoginDialog()
      this.emojiData = this.textarea
    },
    emojiData() {
      this.textarea = this.emojiData
    },
    comment() {
      this.commentData = this.comment
    }
  },
  components: {
    emoji,
    commentBody,
    loginDialog
  }
}
</script>

<style scoped lang='less'>
  .comment-thead {
      height: 30px;
      line-height: 30px;
      border-bottom: 2px solid #c20c0c;
      padding-bottom: 5px;
  }
  .comment-textarea {
    height: 100px;
    .textarea-avatar {
      .default-avatar {
        width: 50px;
        height: 50px;
        background: url("../../../assets/default_avatar.jpg") no-repeat;
      }
    }
    .textarea-con {
      width: calc(100% - 70px);
      height: 100%;
      .alt {
        width: 18px;
        height: 18px;
        // background: url('../../../assets/icon.png');
      }
      .alt {
        background-position: 25px -490px;
      }
      
    }
  }
</style>